import React, { useReducer, createContext } from 'react'
import './App.css'

import Header from './components/Header/index2'
import Footer from './components/Footer/index2'
import List from './components/List/index2'

const initTodos = [
    {id:'001',name:'吃饭',done:true},
    {id:'002',name:'睡觉',done:true},
    {id:'003',name:'打代码',done:false},
    {id:'004',name:'逛街',done:false}
]

export const Context = createContext()

export default function App(){
    const [todos,dispatch] = useReducer((state,action) => {
        switch(action.type){
            case 'delTodo':
                return state.filter(item => item.id !== action.id );
            case 'checkedTodo':
                return state.map(item => item.id === action.id ? {...item,done: action.done} : {...item});
            case 'addTodo':
                return [action.todo,...state];
            case 'checkAll':
                return state.map(item => ({...item,done:action.done}));
            case 'clearAll':
                return state.map(item => ({...item,done:false}));
            default:
                return state;
        }
    },initTodos)
    return(
        <div className="todo-container">
            <div className="todo-wrap">
                <Context.Provider value={{todos,dispatch}}>
                    <Header/>
                    <List/>
                    <Footer/>
                </Context.Provider>
            </div>
        </div>
    )
}